<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="add">新增</el-button>
                </div>
            </template>

            <template #form>
                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">

                    <el-form-item prop="email" label-width="60px">
                        <el-input placeholder="请输入帐号" v-model="formInline.email" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="name" label-width="60px">
                        <el-input placeholder="请输入姓名" v-model="formInline.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="orgCodes" label-width="60px">
                        <!-- 部门 -->
                        <DeparmentCascader v-model:value="formInline.orgCodes" :backValue="formInline.orgCodes"></DeparmentCascader>
                    </el-form-item>
                    <el-form-item prop="costCenterCodes" label-width="60px">

                        <AllSelect style="width:100%" v-model="formInline.costCenterCodes" placeholder="请选择成本中心"
                            :backValue="formInline.costCenterCodes"></AllSelect>
                    </el-form-item>


                    <el-form-item prop="state">
                        <el-select v-model="formInline.state" clearable placeholder="请选择状态">
                            <el-option v-for="item in STATUS_LIST" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                </SearchForm>
            </template>
            <template #table="tableScope">
                <PubilcTable :table-data="tableData" :showIndex="true" :isSlot="false" :list-config="BUDGGE_QUERY_CONFIG"
                    :page-data="pageData" @on-action="onAction" :translateTextDeal="translateTextDeal"
                    :tableHeight="tableScope.tableHeight" :loading="loading" />
            </template>
        </page-view>
        <addAndEdit :dialogVisible="dialogVisible" v-if="dialogVisible" :type="pageType" :editData="editData"
            @handleClose="handleClose" @on-update="onSearch"></addAndEdit>
    </div>
</template>
<script  setup name="UserSetting">
import { BUDGGE_QUERY_CONFIG, STATUS_LIST } from './Common/config'
import { statusText } from '@/util/index'

import addAndEdit from './Common/addAndEdit.vue'
import api from '@/api'
import { onMounted } from 'vue';


const formInline = ref({
    email: '',
    name: '',
    state: '',
    budgetName: '',
    costCenterCodes: [],
    orgCodes: []

})
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const dialogVisible = ref(false)

const tableData = ref([])

const costCenterList = ref([]) // 成本中心

const pageType = ref('add')

const editData = ref({})

const loading = ref(false)

const onSearch = () => {
    pageData.value.pageNum = 1
    getList()
}

// 获取列表数据
const getList = () => {
    loading.value = true
    const parms = {
        ...pageData.value,
        ...formInline.value
    }


    console.log(parms, 'parms')
    api.budgetConfig.permissionsPageList(parms).then(res => {
        const { list, total } = res

        pageData.value.total = total
        tableData.value = list
        loading.value = false
    }).catch(err => {
        loading.value = false
    })

}

const translateTextDeal = (item, val, row) => {

    let text = ''
    if (item.alias == 'state') text = statusText(STATUS_LIST, val)
    if (item.alias == 'costCenterList') {
        let costList = val.map(item => item.centerName)
        text = costList.join("、")

    }
    return text

}


const handleClose = () => {
    dialogVisible.value = false

}
const add = () => {
    pageType.value = 'add'
    dialogVisible.value = true
}
const edit = (row) => {
    pageType.value = 'edit'
    dialogVisible.value = true
    editData.value = { ...row }

}


// 列表操作 分页
const onAction = ([item, row]) => {
    console.log(item, 'itemitem')
    const obj = {
        'pageNum': getList,
        'pageSize': onSearch,
        'edit': edit
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}
onMounted(() => {
    onSearch()


})
</script>
